GraphCMSでカスタムMutationAPIを試してみた
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
GraphCMSはGraphQLクエリを使用できるヘッドレスCMSになります。
GraphCMS内でmutation
今回は、GraphCMSでmutationを使用してみました。GraphQLでは、mutationによって、データの作成や更新・削除などの処理を行います。
Model、Schemaの作成
GraphCMSにログインし、新しくプロジェクトを作成します。
左サイドバーから「Scheme」を選択し、「SampleModel」という名前でモデルを作成します。
スキーマを作成します。
今回は「Single line text」と「Multi line text」を選択し、それぞれ「title」と「description」を指定します。
mutationの定義
左サイドバーの「API playground」から、クエリを実行します。
モデルを作成すると、カスタムGraphQLMutationも追加されます。今回は一部のmutationを定義し、実行してみます。
Create
mutationを定義
実行結果
コンテンツを確認
データが作成されています。
update
mutationを定義
実行結果
コンテンツを確認
delete
mutationを定義
実行結果
コンテンツを確認
Next.js内でmutation
Next.jsのプロジェクトからも、簡単にmutationを使用してみます。
Permissionの変更
GraphCMSの左サイドバーから「Settings」内の「Public Content API」に移動します。「＋Create Permission」から、権限を以下のように変更します。
「Settings」内の「Environments」に移動し、APIをコピーしておきます。
Next.jsプロジェクトを作成
yarn create next-app --ts
.env.localファイルを作成し、環境変数を指定します。
NEXT_PUBLIC_GRAPHCMS_API="コピーしたAPI"
libs/apollo-clients.tsを作成し、以下を記述します。
import { ApolloClient, InMemoryCache } from "@apollo/client";
export const client = new ApolloClient({
uri: process.env.NEXT_PUBLIC_GRAPHCMS_API,
cache: new InMemoryCache(),
});
_app.tsxに移動し、ComponentをApollo-providerでラッピングします。
import { AppProps } from "next/app";
import Head from "next/head";
import { ApolloProvider } from "@apollo/client";
import { client } from "../libs/apollo-client";
export default function App(props: AppProps) {
const { Component, pageProps } = props;
return (
<>
<Head>
<title>Page title</title>
</Head>
<ApolloProvider client={client}>
<Component {...pageProps} />
</ApolloProvider>
</>
);
}
index.tsxを以下のように変更します。useMutation()を使用して実行します。
import Head from "next/head";
import styles from "../styles/Home.module.css";
import { gql, useMutation } from "@apollo/client";
import { useState, ComponentProps } from "react";
type Data = {
id: string;
title: string;
description: string;
};
const CREATE_DATA = gql`
mutation MyMutation($title: String!, $description: String) {
createSampleModel(data: { title: $title, description: $description }) {
id
title
description
createdAt
}
}
`;
const Home = () => {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [addData] = useMutation<Data>(CREATE_DATA);
const handleSubmit: ComponentProps<"form">["onSubmit"] = () => {
addData({ variables: { title: title, description: description } });
};
const onChangeTitle: ComponentProps<"input">["onChange"] = (e) => {
setTitle(e.target.value);
};
const onChangeDescription: ComponentProps<"textarea">["onChange"] = (e) => {
setDescription(e.target.value);
};
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="title"
className={styles.input}
onChange={onChangeTitle}
/>
<textarea
placeholder="description"
rows={4}
className={styles.textarea}
onChange={onChangeDescription}
/>
<button className={styles.button}>Create Data</button>
</form>
</div>
);
};
export default Home;
Home.module.cssにスタイルを追加します。
.input {
display: block;
padding: 4px;
margin: 8px 0;
}
.textarea {
display: block;
padding: 4px;
margin: 8px 0;
}
データを追加してみます。
yarn dev
GraphCMSに戻り、コンテンツを確認します。
データが追加されているのが確認できます。GraphCMSでは、作成データはデフォルトで「DRAFT」となり、非公開になるようです。
まとめ
簡単にですが、GraphCMSでmutationを使用してみました。GraphCMSの「API playground」は、補完も便利で使いやすいので、GraphQLのquery、mutationを試す際には是非使ってみてください。
ではまた。
